<template>
  <el-card class="order-create">
    <h2>创建订单</h2>
    <el-form :model="form" label-width="80px">
      <el-form-item label="商品ID">
        <el-input v-model="form.user_card_id" required />
      </el-form-item>
      <el-form-item label="数量">
        <el-input v-model="form.quantity" type="number" min="1" required />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createOrder">下单</el-button>
      </el-form-item>
    </el-form>
    <el-alert v-if="msg" :title="msg" type="info" show-icon class="msg-alert" />
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const form = ref({ user_card_id: '', quantity: 1 })
const msg = ref('')

const createOrder = async () => {
  try {
    await axios.post('/order/create', { user_card_id: form.value.user_card_id, quantity: form.value.quantity }, { params: { buyer_id: 1 } })
    msg.value = '下单成功'
    ElMessage.success(msg.value)
  } catch (e) {
    msg.value = e.response?.data?.detail || '下单失败'
    ElMessage.error(msg.value)
  }
}
</script>

<style scoped>
.order-create {
  max-width: 400px;
  margin: 40px auto;
  padding: 32px 24px;
  border-radius: 12px;
  background: #f8f9fa;
}
.msg-alert {
  margin-top: 16px;
}
</style> 